import orderApi from '@/api/orderApi'
import type { DriverItem } from '@/types/orderType'
import { formatDate, formatMobile } from '@/utils'
import { Button, Form, Input, Select, Space, Table, type TableColumnsType } from 'antd'
import { useEffect, useState } from 'react'

const DriverList = () => {
  const [form] = Form.useForm()
  const [data, setData] = useState<DriverItem[]>([])
  const getTableData = async () => {
    const params = form.getFieldsValue()
    const res = await orderApi.getDriverList(params)
    setData(res.list)
  }
  const handleReset = () => {
    form.resetFields()
    getTableData()
  }
  useEffect(() => {
    getTableData()
  }, [])
  const columns: TableColumnsType<DriverItem> = [
    {
      title: '司机名称',
      key: 'driverName',
      dataIndex: 'driverName',
      fixed: 'left',
      width: 100
    },
    {
      title: '司机信息',
      render: (record: DriverItem) => {
        return (
          <div>
            <p>司机ID:{record.driverId}</p>
            <p>手机号:{formatMobile(record.driverPhone)}</p>
            <p>注册城市:{record.cityName}</p>
            <p>会员等级:{record.grade}</p>
            <p>司机等级:{record.driverLevel}</p>
          </div>
        )
      },
      width: 200,
      fixed: 'left'
    },
    {
      title: '司机状态',
      key: 'accountStatus',
      dataIndex: 'accountStatus',
      render: (value: number) => {
        return {
          0: '待认证',
          1: '正常',
          2: '暂时拉黑',
          3: '永久拉黑',
          4: '停止推送'
        }[value]
      },
      width: 100
    },
    {
      title: '车辆信息',
      render: (record: DriverItem) => {
        return (
          <div>
            <p>车牌号码:{record.carNo}</p>
            <p>车辆品牌:{record.vehicleBrand}</p>
            <p>车辆名称:{record.vehicleName}</p>
          </div>
        )
      },
      width: 200
    },
    {
      title: '昨日在线时长',
      key: 'onlineTime',
      dataIndex: 'onlineTime',
      width: 100
    },
    {
      title: '昨日司机流水',
      key: 'driverAmount',
      dataIndex: 'driverAmount',
      width: 100
    },
    {
      title: '司机评分',
      key: 'driverScore',
      dataIndex: 'driverScore',
      width: 100
    },
    {
      title: '行为分',
      key: 'rating',
      dataIndex: 'rating',
      width: 100
    },
    {
      title: '昨日推单数',
      key: 'pushOrderCount',
      dataIndex: 'pushOrderCount',
      width: 100
    },
    {
      title: '昨日完单数',
      key: 'orderCompleteCount',
      dataIndex: 'orderCompleteCount',
      width: 100
    },
    {
      title: '加入时间',
      key: 'createTime',
      dataIndex: 'createTime',
      width: 120,
      render: (value: Date) => {
        return formatDate(value)
      }
    }
  ]
  return (
    <div className='driver-list'>
      <Form layout='inline' form={form} className='search-form'>
        <Form.Item label='司机名称' name='driverName'>
          <Input placeholder='请输入司机名称'></Input>
        </Form.Item>
        <Form.Item label='司机状态' name='accountStatus'>
          <Select
            style={{ width: 150 }}
            options={[
              { label: '待认证', value: 0 },
              { label: '正常', value: 1 },
              { label: '暂时拉黑', value: 2 },
              { label: '永久拉黑', value: 3 },
              { label: '停止推送', value: 4 }
            ]}
          ></Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary' onClick={getTableData}>
              搜索
            </Button>
            <Button onClick={handleReset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>司机列表</div>
        </div>
        <Table scroll={{ x: 1300 }} bordered columns={columns} dataSource={data} pagination={false}></Table>
      </div>
    </div>
  )
}

export default DriverList
